<template>
   <!-- <ClientOnly> -->
   <div class="Aoir-Forum-Left-Component">
      <div class="return-page" @click="backPage">
         <span class="iconfont icon-fanhui"></span>
      </div>
      <div class="forum-info">
         <!-- <el-tooltip :content="SystemData.SystemInfo.sns_name" placement="left" effect="light"> -->
         <img style="width: 100%; height: 100%;object-fit: cover;" :src="SystemData.SystemInfo.systemCover" />
         <!-- </el-tooltip> -->
      </div>
      <div class="forum-Join">
         <!-- <el-tooltip content="设置管理" placement="left" effect="light"> -->
         <div v-if="SystemData.SystemUserInfo.systemUserJoin">
            <div v-if="fnISAdmin() || SystemData.SystemInfo.systemCreateUser._id === userinfo._id"
               @click="managementShow = true">
               <span class="iconfont icon-xitongshezhi"></span>
            </div>
            <div v-else @click="outStrongholdUser">离开</div>
         </div>
         <!-- </el-tooltip> -->
         <div v-else @click="createStrongholdUser">加入</div>
      </div>
      <ul class="forum-my">
         <!-- <li v-for="(item, index) in strongholdList.slice(0, 4)" :key="index" @click="GoStronghold(item.sns_url)">
               <el-tooltip :content="item.sns_name" placement="left" effect="light">
                  <el-image style="width: 100%; height: 100%" :src="item.sns_cover" fit="cover" />
               </el-tooltip>
            </li> -->
      </ul>
   </div>
   <!-- </ClientOnly> -->
</template>
<script lang="ts" setup >
import { storeToRefs } from 'pinia';
import { ElMessage } from "element-plus";
const props = defineProps({
   SystemData: {
      type: Object,
      default: {
         SystemInfo: {},
         SystemConfig: {},
         SystemAnnounceList: {},
         SystemUserInfo: [],
         SystemUserList: [],
         SystemClassifyList: [],
         SystemPostsList: [],
      }
   }
});
// 数据函数
const { userinfo } = storeToRefs(cnyzsUserpinia())
const { managementShow, openLogin } = storeToRefs(cnyzsCommonpinia())

// 用户成员列表匹配管理员 如果是管理员返回 true
const fnISAdmin = () => props.SystemData.SystemInfo.systemAuth.some((item: any) => item._id === userinfo.value._id)
// 加入据点请求
async function createStrongholdUser() {
   if (!userinfo.value._id) {
      openLogin.value = true
      return ElMessage.warning('请先登录')
   }
   const res: any = await cnyzsRequest('/api/cnyzs-system-user/join', {
      method: 'POST', data: { systemId: props.SystemData.SystemInfo._id }
   })
   console.log(res);
   if (res.status === 200) {
      ElMessage.success(res.message)
      setTimeout(() => {
         window.location.reload()
      }, 2000);
   }
   else {
      ElMessage.warning(res.message)
   }
}

// 退出据点请求
async function outStrongholdUser() {
   if (!userinfo.value._id) {
      openLogin.value = true
      return ElMessage.warning('请先登录')
   }
   const res: any = await cnyzsRequest('/api/cnyzs-system-user/out', {
      method: 'POST',
      data: { systemId: props.SystemData.SystemInfo._id }
   })
   if (res.status === 200) {
      props.SystemData.SystemInfo.systemMember = props.SystemData.SystemInfo.systemMember - 1
      props.SystemData.SystemUserInfo.systemUserJoin = false
      return ElMessage.warning(res.message)
   }
   ElMessage.warning(res.message)
}





// 返回上一页，没有则返回首页
function backPage() {
   const router = useRouter()
   // 有上一页则返回
   if (window.history.state.back) {
      router.go(-1)
   } else {
      // 没有上一页则返回到首页
      router.replace({ path: '/' })
   }
}


</script>
<style lang="scss" scoped>
.Aoir-Forum-Left-Component {
   position: fixed;
   top: 120px;
   left: 50%;
   transform: translateX(-690px);
   width: 70px;
   display: flex;
   flex-direction: column;
   align-items: center;

   .return-page {
      width: 40px;
      height: 40px;
      border-radius: 100%;
      background-color: #FFF;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 40px;
      box-shadow: 0px 0px 20px 0px rgb(181 181 181/ 70%);
      border: 3px solid #fff;
      cursor: pointer;
      background: var(--aoir-color-primary);
      color: #FFF;
      transition: all .2s;

      &:hover {
         transform: scale(1.2);
      }
   }

   .forum-info {
      width: 60px;
      height: 60px;
      border-radius: var(--aoir-border-radius);
      background-color: #FFF;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0px 0px 20px 0px rgb(181 181 181/ 70%);
      border: 3px solid #fff;
      cursor: pointer;
      margin-bottom: 15px;
      transition: all .2s;

      img {
         border-radius: var(--aoir-border-radius);
      }

      &:hover {
         transform: translateY(-2px);
      }

      &:active {
         transform: translateY(4px);
      }
   }

   .forum-Join {
      width: 60px;
      height: 60px;
      border-radius: var(--aoir-border-radius);
      background-color: #FFF;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0px 0px 20px 0px rgb(181 181 181/ 70%);
      border: 3px solid #fff;
      color: #333;
      cursor: pointer;
      transition: all .2s;
      margin-bottom: 40px;

      &:hover {
         transform: translateY(-2px);
      }

      &:active {
         transform: translateY(4px);
      }

      div {
         width: 100%;
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;

         .iconfont {
            font-size: 25px;
            text-shadow: 0 0 20px #0000009e;
         }
      }
   }

   .forum-my {
      li {
         width: 60px;
         height: 60px;
         border-radius: var(--aoir-border-radius);
         background-color: #FFF;
         display: flex;
         justify-content: center;
         align-items: center;
         box-shadow: 0px 0px 20px 0px rgb(181 181 181/ 70%);
         border: 3px solid #fff;
         color: #FFF;
         background-color: #FFF;
         cursor: pointer;
         transition: all .2s;
         margin-bottom: 15px;

         .el-image {
            border-radius: var(--aoir-border-radius);
         }

         &:hover {
            transform: translateY(-2px);
         }

         &:active {
            transform: translateY(4px);
         }
      }
   }
}
</style>